<template>
  <div class="form_box" key="login">
    <div class="wlogo">
      <img src="../../../../public/logo_w.png" />
    </div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item prop="password" class="password" has-feedback>
        <a-input
          type="password"
          size="large"
          placeholder="请输入密码"
          v-decorator="[
          'password',
          {initialValue:'',rules: [{ required: true, message: '请输入至少6位数密码!' }]}
        ]"
        >
          <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" size="large" html-type="submit">登录</a-button>
      </a-form-item>
      <div>
        <a size="large" target="_blank" :href="this.$api.help.url.forgetpw">忘记密码？</a>
      </div>
    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this)
    };
  },
  computed: {
    toURL() {
      if (typeof this.$route.query.redirect != "undefined") {
        return this.$route.query.redirect;
      } else {
        return "/";
      }
    }
  },
  created() {
    this.checkFirst();
    if (typeof this.$store.state.common.token.str != "undefined") {
      this.$router.replace({
        path: this.toURL
      });
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (err) {
          console.log(err);
          //this.$message.error("Fail!");
        } else {
          this.$api.auth.login({
            password: values.password,
            redirect: this.toURL
          });
        }
      });
    },
    checkFirst() {
      this.$api.auth.checkFirst().then(isFirst => {
        if (isFirst) {
          this.$router.replace({
            path: "/auth/register",
            query: {
              redirect: this.$router.currentRoute.fullPath
            }
          });
        }
      });
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
</style>
